<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%-- ssx --%>
<!DOCTYPE HTML>
<html>
<head>
    <base href="<%=basePath%>">

    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <!-- load css -->
    <link rel="icon" href="image/common/logo.png" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" href="css/font/iconfont.css?v=1.0.0" media="all">
    <link rel="stylesheet" type="text/css" href="js/layui/css/layui.css" media="all">
    <link href="js/common/ztree/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css"/>
    <link href="js/common/cropper/cropper.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/common/jquery-1.11.3.js"></script>
    <script src="js/common/ztree/jquery.ztree.all.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/layui/layui.js"></script>
    <script type="text/javascript" src="js/jQueryFileUpload/js/vendor/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="js/jQueryFileUpload/js/jquery.iframe-transport.js"></script>
    <script type="text/javascript" src="js/jQueryFileUpload/js/jquery.fileupload.js"></script>
    <script type="text/javascript" src="js/common/cropper/cropper.js"></script>
</head>
<style>
    <!--
    object {
        left: 0;
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 14px;
        font: inherit;
        vertical-align: baseline;
    }

    .fileupload-block {
        position: relative;
        width: 250px;
        height: 165px;
        text-align: center;
        line-height: 100px;
        overflow: hidden;
        border: solid 1px #ddd;
        border-radius: 2px;
        cursor: default;
        margin-left: auto;
        margin-right: auto;
    }

    .fileupload-info {

    }

    .fileupload-file {
        font-size: 200px;
        display: inline-block;
        position: absolute;
        top: 0;
        right: 0;
        filter: alpha(opacity=0);
        -moz-opacity: 0;
        -khtml-opacity: 0;
        opacity: 0;
        cursor: pointer;
        width: 250px;
        height: 165px;
    }

    .fileupload-image {
        margin: auto;
    }

    .fileupload-delete {
        display: inline-block;
        position: absolute;
        height: 18px;
        width: 18px;
        padding: 3px;
        top: 1px;
        right: 1px;
        line-height: 18px;
        cursor: pointer;
    }

    .imgBtn {
        margin-left: auto;
        margin-right: auto;
    }

</style>
<body>
<%-- 添加菜单信息  --%>
<div id="updUser">
    <form class="layui-form" lay-filter="gcForm" id="gcForm"
          action="phone/updatePhones.do?id=${id}" style="margin:40px;">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">首页图片</label>
                <div class="layui-input-block">
                    <div class="fileupload-block"
                         style="width:${imgW}px;height:${imgH}px;">
                        <img class="fileupload-delete" id="Delete" onclick="deleteImage();"
                             style="position:absolute;z-index:20;display:none;" src="images/x.jpg"/>
                        <img class="fileupload-image" id="Img" src="${fileServerUrl}${picPath}"
                             style="display:inline;width:${imgW}px;height:${imgH}px;"/>
                        <label for="updinput" class="fileupload-file" title="点击上传图片"
                               style="width:${imgW}px;height:${imgH}px;">
                            <input type="file" accept=".jpg,.gif,.png,.jpeg,.bmp" class="image" id="updinput"
                                   name="image" data-url="phone/uploadPhone.do" style="display:none;" multiple/>
                        </label>
                        <input class="fileupload-input" id="InputBefore" type="hidden" name="fileId" value="${picPath}"/>
                        <input class="fileupload-input" id="Input" type="hidden" name="picPath" value="${picPath}"/>
                        <label><span class="text-dot"></span></label>
                        <input name="picId" type="hidden" value="${id}"/>
                    </div>

                    <div>
                        <input id="imgBtn" type="button" class="imgBtn"
                               onclick="upload();" style="display:none" value="上传选中图片"/>
                        <div class="" id="img-progress"></div>
                    </div>
                </div>
            </div>
        </div>

        <hr class="layui-bg-gray" style="margin-top:40px;margin-bottom:30px">

        <!-- <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="UpdRoles">保存</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div> -->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <a id="btnSave" href="javascript:classSave();" title="提交" class="layui-btn layui-btn-sm">
                    <i class="layui-icon">&#xe654;</i>提交
                </a>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" src="js/layui/layui.js"></script>
<script type="text/javascript">
    layui.config({
        base: "<%=basePath%>/js/common/"
    }).use(["common", "element", "layer", "form", "table", "jquery"], function () {
        var elem = layui.element;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var $ = layui.jquery;

        layui.common.init();

        $("#updinput").fileupload({
            dataType: "json",
            maxFileSize: "500000",
            success: function (data) {
                if (data.statusCode == "200") {
                    var w = $(this).attr("wValue");
                    var h = $(this).attr("hValue");
                    $("#Img").attr("tValue", data.model);
                    $("#Img").attr("src", data.forwardUrl).css("display", "block");
                    $("#image>object").css("height", "600");
                    $("#Delete").css("display", "block");
                    //初始化截图工具
                    $("#Img").cropper({aspectRatio: w / h});
                    mycroper = true;
                    $("#imgBtn").css("display", "block");
                } else if (data.statusCode == "300") {
                    layer.msg(data.message, {icon: 5, time: 2000});
                }
            }
        });
        //图片剪切
        var mycroper = false;
        //上传选中的图片部分并显示
        window.upload = function () {
            var delFile = $("#Img").attr("tValue");
            //获取截图工具选中的部分
            var cut = $("#Img").cropper("getCroppedCanvas").toDataURL("image/jpeg");
            cut = cut.substring(23);
            $.post("phone/uploadCanvas.do", {
                "canvasData": cut,
                "gcId": "${goodId}",
                "delFile": delFile,
                "file_id":"${pic}"
            }, function (json) {
                if (json.statusCode == "200") {
                    $("#Img").attr("src", json.forwardUrl).css("display", "block");
                    $("#image>object").css("height", "0");
                    $("#Delete").css("display", "block");
                    $("#Input").val(json.model);
                    if (mycroper) {
                        $("#Img").cropper("destroy");
                        mycroper = false;
                    }
                    $("#imgBtn").css("display", "none");
                }
                setTimeout(function () {
                }, 2000);
            }, "json");
        }
        //删除图片
        window.deleteImage = function () {
            $("#Img").removeAttr("src").css("display", "none");
            $("#image>object").css("height", 600);
            $("#Delete").css("display", "none");
            $("#Input").val(json.model);
            //销毁截图工具
            if (mycroper) {
                $("#Img").cropper("destroy");
                mycroper = false;
            }
            $("#imgBtn").css("display", "none");
        };
        //监听提交  添加
        form.on('submit(updUser)', function (data) {
            //	layer.msg(JSON.stringify(data.field));
            //	console.log(data.field);
            //console.log(data+"------------");
            //	console.log(data.field.creditSum)
            var creditMoney = data.field.creditMoney;
            var creditId = data.field.creditId;
            var creditSum = data.field.creditSum;
            //console.log(creditId);
            $.ajax({
                type: "post",
                data: {
                    "creditMoney": creditMoney,
                    "creditId": creditId,
                    "creditSum": creditSum
                },
                dataType: "json",
                success: function (json) {
                    //console.log(json);
                    if (json.statusCode == 200) {
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                        parent.layer.msg(json.message, {
                            icon: 6,
                            time: 2000
                        });
                    } else {
                        layer.msg(json.message, {
                            icon: 5,
                            time: 2000
                        });
                    }
                }
            });
            return false;
        });
        window.classSaved = function (data) {
            if (data.statusCode == 200) {
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
                layer.msg(data.message, {icon: 6, time: 2000});
            } else {
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
                layer.msg(data.message, {icon: 5, time: 2000});
            }
        };
        window.classSave = function () {
            var $this = $("#gcForm");

            $.post($this.attr("action"), $this.serialize(), classSaved, "json");
        };


    });
</script>
</body>
</html>
